<template>
    <div class="pay-contain">
        <div class="pay-price">￥{{totalPrice}}</div>
        <div class="pay-type">
            <div class="pay-type-title">付款方式</div>
            <div class="pay-type-content">
                <van-radio-group v-model="pay_type" @change = handlePayType>
                    <div class="pay-type-content__item">
                        <div class="pay-type-content__item__left">
                            <img src="../../assets/images/wx-normal.png" v-if="wx_disabled">
                            <img src="../../assets/images/weixin.png" v-else>
                            <span v-bind:class="wx_disabled ? 'text text-disabled':'text'">微信</span>
                        </div>
                        <van-radio name="2" checked-color="#07c160" :disabled="wx_disabled">
                            <img class="type-icon" slot="icon" slot-scope="props" :src="props.checked ? icon.active : icon.normal">
                        </van-radio>
                    </div>
                    <!-- <div class="pay-type-content__item">
                        <div class="pay-type-content__item__left">
                            <img  src="../../assets/images/cash-normal.png" v-if="cash_disabled">
                            <img  src="../../assets/images/cash-active.png" v-else>
                            <span v-bind:class="cash_disabled? 'text text-disabled':'text'">现金</span>
                        </div>
                        <van-radio name="3" checked-color="#07c160" :disabled="cash_disabled">
                            <img class="type-icon" slot="icon" slot-scope="props" :src="props.checked ? icon.active : icon.normal">
                        </van-radio>
                    </div> -->
                    <!--<div class="order-pay-type-content-item">-->
                        <!--<div>-->
                            <!--<img  src="../../assets/images/packet-normal.png" v-if="totalPrice > balance || balance ==0">-->
                            <!--<img  src="../../assets/images/packet-active.png" v-else>-->
                            <!--<span class="item-title item-title-disabled" v-if="totalPrice > balance || balance ==0">元宝({{balance}})</span>-->
                            <!--<span class="item-title" v-else>元宝(￥{{balance}})</span>-->
                        <!--</div>-->
                        <!--<van-radio name="3" checked-color="#07c160" :disabled="balance_disabled">-->
                            <!--<img class="type-icon" slot="icon" slot-scope="props" :src="props.checked ? icon.active : icon.normal">-->
                        <!--</van-radio>-->
                    <!--</div>-->
                </van-radio-group>
            </div>
        </div>
        <!-- <div class="pocket-money" v-if="pocketMoneyDisabled">
            <div class="pocket-money-left">
                <span><i class="icon"></i></span>
                <span class="title">元宝余额抵扣</span>
            </div>
            <div v-if="checked" class="pocket-money-right">
                <span>{{pocketMoney}}</span>
                <span class="check" @click="handleCheck"><i class="checked-icon"></i></span>
            </div>
            <div v-else class="pocket-money-right">
                <span>{{pocketMoney}}</span>
                <span class="check" @click="handleCheck"><i class="uncheck-icon"></i></span>
            </div>
        </div>
        <div class="pocket-money pocket-money-disabled" v-else>
            <div class="pocket-money-left">
                <span><i class="icon-disabled"></i></span>
                <span class="title">元宝余额抵扣</span>
            </div>
            <div v-if="checked" class="pocket-money-right">
                <span>{{pocketMoney}}</span>
                <span class="check"><i class="uncheck-icon-disabled"></i></span>
            </div>
            <div v-else class="pocket-money-right">
                <span>{{pocketMoney}}</span>
                <span class="check"><i class="uncheck-icon-disabled"></i></span>
            </div>
        </div> -->
        <div class="pay-actual">
            <div><span>实付金额：</span><span class="money">￥{{actuallyPaid}}</span></div>
        </div>
        <button class="pay-submit" @click="handlePay">立即支付</button>


        <!-- <div class="pay-btn"><button  class="btn-pay" @click="handlePay"><span class="van-button__text"></span></button></div> -->
        <!-- <div class="overlay" v-if="show"></div>
        <div class="tips" v-if="show">
            <div class="title">你元宝不足</div>
            <div class="desc">前往C2C元宝交易专区获取</div>
            <button class="btn-entry" @click="handleTurn">进入C2C元宝交易专区></button>
            <button class="btn-cancel" @click="handleCancel">取消购买</button>
        </div> -->
    </div>

</template>

<script>
import { getSignPackage, wxPay, orderPay} from "@/api/goods"
import { url } from "@/utils";
import { getUserMoney } from "@/api/bdchats";
import { Dialog } from "vant"
import wx from 'weixin-js-sdk';
export default {
    name: "pay",
    props: {
        orderId:{
            type: Number,
            default: 0
        },
        channelId:{
            type: Number,
            default: 0
        },
        totalPrice:{
            type: Number,
            default: 0,
        },
        pocketMoney: {
            type: Number,
            default: 0,
        }
    },
    watch: {
        pocketMoney: {
            deep: true,
            handler(val) {
                this.handlePocketMoney(val)
            }
        }
    },
    created(){
        this.getConfig();
        this.cash = localStorage.getItem("commission") ? localStorage.getItem("commission"): 0;
        this.handlePocketMoney(this.pocketMoney)
        if(this.cash < (this.totalPrice - this.pocketMoney) || this.cash === 0){
            this.cash_disabled = true
        }
        if(this.totalPrice - this.pocketMoney > 3000) {
            this.wx_disabled = true
        }

    },
    data() {
        return {
            show: false,
            cash: 0,
            pay_type: "2",
            balance: 0,
            wx_disabled: false,
            balance_disabled: false,
            cash_disabled: false,
            checked: true,
            pocketAmount: 0,  //元宝
            pocketMoneyDisabled: true, //是否允许元宝支付
            actuallyPaid: 0,
            icon: {
                normal: require('@/assets/images/radio-normal.png'),
                active: require('@/assets/images/radio-active.png')
            }
        }
    },
    methods: {
        getConfig() {
            const data = {}
            data.url = 'http://'+ window.location.host + '/'
            getSignPackage(data).then(response => {
                if(response)  {
                    wx.config({
                        debug: false, // 开启调试模式,
                        appId: response.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
                        timestamp: response.timestamp, // 必填，生成签名的时间戳
                        nonceStr: response.nonceStr, // 必填，生成签名的随机串
                        signature: response.signature,// 必填，签名，见附录1
                        jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                }
            })
        },
        calcTotal(price){
            return (price * 1).toFixed(2);
        },
        handlePocketMoney(val) {
            this.pocketAmount = parseFloat(val)
            if (this.balance < this.pocketAmount  || this.balance === 0 || this.pocketAmount===0) {
                this.pocketMoneyDisabled = false
                this.pocketAmount = 0
                this.actuallyPaid = this.totalPrice
            } else {
                if(this.checked) {
                    this.actuallyPaid = this.totalPrice -  this.pocketAmount
                }
                this.pocketMoneyDisabled = true
            }
            this.actuallyPaid = this.actuallyPaid.toFixed(2)
        },
        handlePayType() {
            // if(this.pay_type === "3" ) {
            //     this.pocketMoneyDisabled = false
            //     this.checked = false
            //     this.actuallyPaid = this.totalPrice
            //     this.pocketAmount = 0
            // } else {
                this.pocketAmount = parseFloat(this.pocketMoney)
                if (this.balance < this.pocketAmount  || this.balance === 0 || this.pocketAmount===0 ) {
                    this.pocketMoneyDisabled = false
                    this.pocketAmount = 0
                    this.actuallyPaid = this.totalPrice
                } else {
                    if(this.checked) {
                        this.actuallyPaid = this.totalPrice -  this.pocketAmount
                    }
                    else {
                        this.actuallyPaid = this.totalPrice
                    }
                    this.pocketMoneyDisabled = true
                }
            // }
            this.actuallyPaid = this.actuallyPaid.toFixed(2)
        },
        handleCheck() {
            if (this.checked) {
                this.checked = false
                this.actuallyPaid = this.totalPrice
                this.pocketAmount = 0
            } else {
                if (this.pocketMoneyDisabled) {
                    this.checked = true
                    this.pocketAmount = this.pocketMoney
                    this.actuallyPaid = this.totalPrice - this.pocketAmount
                }
            }
            this.actuallyPaid = this.actuallyPaid.toFixed(2)
        },
        handlePay() {
            // if(this.balance < this.pocketMoney) {
            //     this.show = true
            //     return
            // }

            const data = {}
            const self = this
            data.orderId = parseInt(this.orderId);
            var payType = ""
            switch (this.pay_type) {
                case "1":
                    payType = "ALI_PAY"
                    break
                case "2":
                    payType = "WX_PAY"
                    break
                // case "3":
                //     payType = "WALLET_PAY"
                    // break
                case "3":
                    payType = "CASH_PAY"
                    break
            }
            data.payType = payType
            data.changePayment = this.pocketAmount
            data.openid = localStorage.getItem("openid")
            orderPay(data).then(respone => {
                if(respone.data){
                    wx.chooseWXPay({
                        appId: respone.data.appId,
                        timestamp: respone.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: respone.data.nonceStr, // 支付签名随机串，不长于 32 位
                        package: respone.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                        signType: respone.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign:  respone.data.paySign, // 支付签名
                        success: function (res) {
                            url('/user/orderlist')
                            alert(res.err_code+res.err_desc+res.err_msg)
                        },
                        error:function(res){
                            alert(res)
                            alert(res.err_code+res.err_desc+res.err_msg)
                        }
                    });
                }
            })
        },
        handleTurn() {
            sessionStorage.setItem('balanceFrom','pay')
            this.$router.push('/tradingBalance/index')
        },
        handleCancel() {
            this.show = false
        }
    }
}
</script>

<style scoped>

</style>
